<template>
    <component is="a-modal" v-model:visible="visible" width="80%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <a-descriptions title="用户信息" bordered :column="4" >
            <a-descriptions-item label="ID" :span="1">{{ paramsData.id }} <text style="color:red">( {{ paramsData.state_text }} )</text></a-descriptions-item>
            <a-descriptions-item label="审核备注" :span="1">{{ paramsData.msg }}</a-descriptions-item>
            <a-descriptions-item label="申请时间" :span="1">{{ paramsData.create_time }}</a-descriptions-item>
            <a-descriptions-item label="处理时间" :span="1">{{ paramsData.update_time }}</a-descriptions-item>
            <a-descriptions-item label="账号类型" :span="1"><text style="color:red"> {{ paramsData.reg_type_text }} </text></a-descriptions-item>
            <a-descriptions-item label="UID" :span="1"  ><text style="color:red"> {{ paramsData.user_id }} </text></a-descriptions-item>
            <a-descriptions-item label="会员名称" :span="2"  ><text style="color:red"> {{ paramsData.user_name }} </text></a-descriptions-item>
            <a-descriptions-item label="收款人" :span="1" v-if="paramsData.reg_type==1">{{ paramsData.true_name }}</a-descriptions-item>
            <a-descriptions-item label="银行名称" :span="1" v-if="paramsData.reg_type==1">{{ paramsData.bank_name }}</a-descriptions-item>
            <a-descriptions-item label="支行名称" :span="1" v-if="paramsData.reg_type==1">{{ paramsData.sub_bank_name }}</a-descriptions-item>
            <a-descriptions-item label="银行账号" :span="1" v-if="paramsData.reg_type==1">{{ paramsData.number }}</a-descriptions-item>

            <a-descriptions-item label="法人姓名" :span="1" v-if="paramsData.reg_type==2 ">{{ paramsData.true_name }}</a-descriptions-item>
            <a-descriptions-item label="银行名称" :span="1" v-if="paramsData.reg_type==2">{{ paramsData.bank_name }}</a-descriptions-item>
            <a-descriptions-item label="支行名称" :span="1" v-if="paramsData.reg_type==2">{{ paramsData.sub_bank_name }}</a-descriptions-item>
            <a-descriptions-item :label="paramsData.type_text" :span="1" v-if="paramsData.reg_type==2"> {{paramsData.number }}</a-descriptions-item>

            <a-descriptions-item label="公司名称" :span="2" v-if="paramsData.company">{{ paramsData.true_name }}</a-descriptions-item>
            <a-descriptions-item label="社会统一代码" :span="2" v-if="paramsData.company==2">{{ paramsData.bank_name }}</a-descriptions-item>

            <a-descriptions-item label="银行卡身份证" :span="2" v-if="paramsData.reg_type==1 && paramsData?.info?.bank_card">{{ paramsData?.info?.bank_card }}</a-descriptions-item>
            <a-descriptions-item label="银行卡手机号" :span="2" v-if="paramsData.reg_type==1 && paramsData?.info?.bank_mobile">{{ paramsData?.info?.bank_mobile }}</a-descriptions-item>
           
            <a-descriptions-item label="签约图片" :span="1">
                <a :href="paramsData?.image" target="_blank" style="color:#5c7cfa;cursor: pointer;"> 点击查看</a>
            </a-descriptions-item>
        </a-descriptions>
      
        <div class="photoList">
            <div class="photo" v-if="paramsData.area==2 && paramsData.reg_type==1">
                <span>银行卡</span>
                <a-image class="img" :src="paramsData?.info?.bank_photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData.reg_type==2 && paramsData.type=='company_account'">
                <span>企业对公账户图片</span>
                <a-image class="img" :src="paramsData?.company?.account_photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.info?.secondary_photo">
                <span>背面照</span>
                <a-image class="img" :src="paramsData?.info?.secondary_photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.info?.passbook_img">
                <span>银行纸本</span>
                <a-image class="img" :src="paramsData?.info?.passbook_img"></a-image>
            </div>
            <div class="photo" v-if="paramsData.reg_type==2&&paramsData.company && paramsData.company.photo">
                <span>营业执照</span>
                <a-image class="img" :src="paramsData?.company?.photo"></a-image>
            </div>
            <div class="photo" v-if="paramsData.company && paramsData.company.company_seal">
                <span>公司印章</span>
                <a-image fit="cover" class="img" :src="paramsData?.company?.company_seal"></a-image>
            </div>
            <div class="photo" v-if="paramsData.company && paramsData.company.fuzeren_seal">
                <span>负责人印章</span>
                <a-image  class="img" :src="paramsData?.company?.fuzeren_seal"></a-image>
            </div>
        </div>
        <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="margin-top: 30px;">
            <div v-if="mode == 'check'">
                <a-form-item label="审核操作" field="state">
                    <sa-radio @change="getChange" v-model="formData.state" :data="STATE"></sa-radio>
                </a-form-item>
                <a-form-item v-if="formData.state ==2" label="审核备注" field="remake_id">
                    <sa-radio v-model="formData.remake_id" :data="paramsData.remake_list" :fieldNames="{ value: 'value', label:'title'}"></sa-radio>
                </a-form-item>
                <a-form-item v-if="formData.remake_id ==-1" label="备注" field="message">
                    <a-input v-model="formData.message" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="操作密码" field="admin_pay_password">
                    <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="谷歌验证码" field="google_code">
                    <a-input v-model="formData.google_code" placeholder="请输入" />
                </a-form-item>
            </div>
        </a-form>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import SaRadio from '@cps/sa-radio/index.vue'
import memberApi from '@/api/system/member'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
import tool from '@/utils/tool'
const paramsData = ref({})
// 获取角色组列表
const getParams = async () => {
    const { data } = await memberApi.member_bank_detail(formData.id)
    paramsData.value = { ...data.info }
    paramsData.value.remake_list = tool.simpleTransformArray(data.remake_list)
    paramsData.value.remake_list.push({value:-1,title:'其他'})
    console.log('1', paramsData.value);
}
const emit = defineEmits(['success'])
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)

let title = computed(() => {
    return (mode.value == 'detail' ? '详情' : '审核')
})
const STATE = [
    { value: 0, title: '待审核' },
    { value: 1, title: '通过审核' },
    { value: 2, title: '不通过审核' },
]
// 表单信息
const formData = reactive({
    state: 0,
    remake_id: '',
    admin_pay_password: '',
    message:'',
    google_code: '',
    id: ''
})

// 验证规则
const rules = ref({
    admin_pay_password: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
    pay_state: [{ required: true, message: '请选择' }],

});
// 打开弹框
const open = async (type, data) => {
    paramsData.value = {}
    mode.value = type
    visible.value = true
    formRef.value.resetFields()
    formData.id = data.id
    await initPage()
    await getParams()

}
const getChange = () => {
    formData.return_cost = null
}

// 初始化页面数据
const initPage = async () => {
}

// 数据保存
const submit = throttle(async (done) => {
    if (mode.value == 'check') {
        const validate = await formRef.value?.validate()
        if (!validate) {
            loading.value = true
            try {
                let data = { ...formData }
                let result = await memberApi.member_bank_List_check(data)
                if (result.code === 200) {
                    Message.success('操作成功')
                    emit('success')
                    visible.value = false
                    done(true)
                }
                // 防止连续点击提交
                setTimeout(() => {
                    loading.value = false
                }, 500)
            } catch {
                loading.value = false
            }
        }
        done(false)
    } else {
        done(true)
    }
}, 100)

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open })
</script>
<style lang="less" scoped>
.photoList {
    width: 100%;
    max-height: 200px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: center;

    .photo {
        width: 180px;
        height: 180px;
        text-align: center;
        color: #5c7cfa;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 4px;
        margin-right: 100px;

        .img {
            margin-top: 15px;
            cursor: pointer;
            width:100px;
            height: 140px;
        }
    }
}
</style>
